<template>
  <div class="container">
    <el-carousel
      indicator-position="none"
      :autoplay="false"
      height="30rem"
    >
      <el-carousel-item>
        <SourceStandBy />
      </el-carousel-item>
      <el-carousel-item>
        <TableStandBy />
      </el-carousel-item>
      <el-carousel-item>
        <LibStandby />
      </el-carousel-item>
      <el-carousel-item>
        <LibTableStandby />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import '@/assets/styles/chartPanel.scss'
import TableStandBy from './TableStandBy.vue'
import SourceStandBy from './SourceStandBy.vue'
import LibStandby from './LibStandby.vue'
import LibTableStandby from './LibTableStandby.vue'
// import DataDump from './DataDump.vue'
// import tableSyncWay from './tableSyncWay.vue'
// import disasterRecovery from './disasterRecovery.vue'
export default {
  components: {
    TableStandBy,
    SourceStandBy,
    LibStandby,
    LibTableStandby
    // tableSyncWay,
    // disasterRecovery,
    // DataDump
  },
  data() {
    return {
      // count: { newIp: 0, newVisits: 0, recentIp: 0, recentVisits: 0 },
    }
  },
  mounted() {
    // get().then(res => {
    //   this.count.newIp = res.newIp
    //   this.count.newVisits = res.newVisits
    //   this.count.recentIp = res.recentIp
    //   this.count.recentVisits = res.recentVisits
    // })
    const nowTimes = Date.now()
    const oldTimes = nowTimes - 86400000 * 7
    const oldDate = this.getDate(oldTimes) // 一个月前的时间
    const nowDate = this.getDate(nowTimes) // 今天的时间
    this.time = [oldDate, nowDate]
  },
  methods: {
    getDate(time) {
      if (time) {
        const val = new Date(time)
        const Y = val.getFullYear()
        const M =
          val.getMonth() + 1 < 10
            ? '0' + (val.getMonth() + 1)
            : val.getMonth() + 1
        const D = val.getDate() < 10 ? '0' + val.getDate() : val.getDate()
        const h = val.getHours() < 10 ? '0' + val.getHours() : val.getHours()
        const m =
          val.getMinutes() < 10 ? '0' + val.getMinutes() : val.getMinutes()
        const s =
          val.getSeconds() < 10 ? '0' + val.getSeconds() : val.getSeconds()
        return Y + '-' + M + '-' + D + ' ' + h + ':' + m + ':' + s
      }
      return ''
    }
  }
}
</script>

<style lang="scss">
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__indicators {
  background-color: rgba(71, 86, 105, 0.5);
  border-radius: 2px;
}
</style>
